<!-- 百人(千倍合约) -->
<template>
  <el-dialog v-if="props.show" :model-value="props.show" :title="GameName(indexStore.gameArray, 100005) + $t('381')" :close-on-click-modal="false"
    :close-on-press-escape="false" top="12vh" width="60%" @close="onHideDetails">
    <div class="dialogMaxHeight" :class="props.isDisableUser ? 'disableUser' : ''">
      <el-form ref="ruleFormRef" :model="data.currencyInfo" :inline="true" :rules="rules" :scroll-to-error="true">
        <form-item :title="t('41')" value="game_name">
          <div class="gameIcon">
            <div class="flex">
              <el-tag size="small">{{GamePlatform(indexStore.gameArray,data.game_id) }}</el-tag>
              <img class="game-icon" :src="selectToLabel(GAMEICON, data.game_id)" alt="">
            </div>
            {{ GameName(indexStore.gameArray, data.game_id) }}
          </div>
        </form-item>
        <form-item :title="t('890')" :pass="true" value="currency_id">
          <el-select class="formItem280 marginR20" v-model="data.currency_id" filterable @change="chooseCurrency">
            <el-option v-for="(item, index) in data.currencyList" :key="index"
              :label="item.remark + ' (' + item.a_crypto_name + ')'+'-'+item.a_crypto_title" :value="item.id" />
          </el-select>
          <el-button type="warning" @click="data.batchShow = true">{{ t('891') }}</el-button>
          <span class="tipsText">({{ t('892') }})</span>
        </form-item>
        <form-item :title="t('893')" value="a_crypto_control">
          <el-radio-group v-model="data.currencyInfo.a_crypto_control" size="large">
            <el-radio-button :label="t('101')" :value="1" />
            <el-radio-button :label="t('102')" :value="0" />
          </el-radio-group>
          <span class="tipsText">({{t('894')}})</span>
        </form-item>
        <form-item :title="t('895')" value="a_crypto_name">
          <span class="box-title">{{ data.currencyInfo.a_crypto_name }}</span>
          <span class="tipsText">({{ t('896') }})</span>
        </form-item>
        <form-item :title="t('897')" value="a_crypto_title">
          <span class="box-title">{{ data.currencyInfo.a_crypto_title }}</span>
          <span class="tipsText">({{ t('898') }})</span>
        </form-item>
        <form-item :title="t('899')" :pass="true" value="a_crypto_precision">
          <el-input-number v-model="data.currencyInfo.a_crypto_precision" :min="0" :max="99999999999999999999" :precision="0"
            :placeholder="t('899')" clearable controls-position="right" />
          <span class="tipsText">({{ t('900') }})</span>
        </form-item>
        <form-item :title="t('901')" :pass="true" value="a_crypto_min_user_position">
          <el-input-number class="formItem240" v-model="data.currencyInfo.a_crypto_min_user_position" :min="-99999999999999999999" :max="99999999999999999999" 
          :placeholder="t('901')" clearable controls-position="right" />
          <span class="tipsText">({{ t('902') }})</span>
        </form-item>
        <form-item :title="t('903')" :pass="true" value="a_crypto_max_user_position">
          <el-input-number class="formItem240" v-model="data.currencyInfo.a_crypto_max_user_position" :min="0" :max="99999999999999999999" 
            :placeholder="t('903')" clearable controls-position="right" />
          <span class="tipsText">({{ t('904') }})</span>
        </form-item>
        <form-item :title="t('981')" :pass="true" value="a_crypto_holding_time">
          <el-input-number class="formItem240" v-model="data.currencyInfo.a_crypto_holding_time" :min="0" :max="99999999999999999999" :precision="0"
            :placeholder="t('981')" clearable controls-position="right" />
          <span class="tipsText">({{ t('982') }})</span>
        </form-item>
      </el-form>
    </div>
    <template #footer >
      <div class="dialog-footer" v-show="!props.isDisableUser">
        <el-button type="info" @click="onHideDetails">{{ t('240') }}</el-button>
        <el-button type="primary" @click="gameSet(ruleFormRef)">{{ t('241') }}</el-button>
      </div>
    </template>
  </el-dialog>

  <!-- 批量控制货币 -->
  <el-dialog :model-value="data.batchShow" :title="data.game_name" :close-on-click-modal="false"
    :close-on-press-escape="false" top="24vh" width="50%" @close="onHideDetails">
    <div class="dialogMaxHeight" :class="props.isDisableUser ? 'disableUser' : ''">
      <form-item :title="t('890')" :pass="true" value="currency_id">
        <el-select class="imWidth100" v-model="data.currency_ids" multiple filterable>
          <el-option v-for="(item, index) in data.currencyList" :key="index"
            :label="item.remark + ' (' + item.a_crypto_name + ')'+'-'+item.a_crypto_title" :value="item.id" />
        </el-select>
      </form-item>
      <form-item :title="t('893')" value="crypto_control">
          <el-radio-group v-model="data.crypto_control" size="large">
            <el-radio-button :label="t('101')" :value="0" />
            <el-radio-button :label="t('102')" :value="1" />
          </el-radio-group>
          <span class="tipsText">({{t('894')}})</span>
        </form-item>
    </div>
    <template #footer v-show="!props.isDisableUser">
      <div class="dialog-footer">
        <el-button type="info" @click="onHideDetails">{{ t('240') }}</el-button>
        <el-button type="primary" @click="batchCurrency">{{ t('241') }}</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref, reactive, watch } from 'vue'
import { ElMessage,ElMessageBox } from 'element-plus'
import type { FormInstance, FormRules } from 'element-plus'
import { getThousand, editThousand, editBatchThousand } from '@/api/game'
import FormItem from '@/components/FormItem/FormItem.vue'
import { GAMEICON } from '@/config/eunm'
import { throttle, selectToLabel, GamePlatform,GameName } from '@/utils/index'

import { useI18n } from 'vue-i18n'
const { t } = useI18n()
import { useStore } from '@/stores/index'
const indexStore = useStore()

const props = defineProps({
  show: {
    type: Boolean,
    default: () => {
      return false
    }
  },
  isDisableUser: {
    type: Boolean,
    default: () => {
      return false
    }
  },
  checkedItem: {
    type: Object,
    default: () => {
      return {}
    }
  }
})

watch(
  () => [props.checkedItem, props.show],
  async (value) => {
    if (value[0]) {
      Object.assign(data, props.checkedItem)
    }
    if (value[1]) {
      getSearchList(props.checkedItem.agent_id) // 获取运营商配置
    }
  }
)

const data = reactive({
  id: 0,
  game_id: 0,
  agent_id: 0,
  game_name: '',
  currency_id: 0,
  currencyInfo:{
    id: 0, // 货币
    a_crypto_name: '', // 简称
    a_crypto_title: '', // 全称
    a_crypto_control: 0,// 币种开关
    a_crypto_precision: 0,// 此币种在游戏内显示的小数位数
    a_crypto_bust_buffer: 0,// 爆仓公式因数
    a_crypto_min_user_position: 0,// 最低下注额度，此币种的最多下注额度，杠杆后
    a_crypto_max_user_position: 0,// 用户最大持仓量;用户当前持有此币种的最大值
    a_crypto_holding_time: 24,// 持仓时间小时上限
  } as any,
  currencyList: [] as any[], // 运营商货币
  batchShow: false,
  currency_ids: [],
  crypto_control: 1
})

// 获取运营商货币
const getSearchList = async (id: number) => {
  let res = await getThousand({ agent_id: id });
  data.currencyList = res.data.list
  data.currency_id = res.data.list[0].id
  data.currencyInfo = res.data.list[0]
}

// 选择货币
const chooseCurrency = () => {
  data.currencyList.forEach( (item:any) => {
    if(item.id==data.currency_id){
      data.currencyInfo = item
    }
  })
}

// 选择批量修改货币
const batchCurrency = () => {
  let msg='';
  if(!data.currency_ids.length){
    return ElMessage.error(t('905'))
  }
  data.currencyList.forEach((item:any)=>{
    data.currency_ids.forEach((second:number)=>{
      if(item.id== second){
        msg += item.remark + '(' + item.a_crypto_name + ') '
      }
    })
  })
  ElMessageBox.confirm(t('906')+msg, t('650'), {
    confirmButtonText: t('241'),
    cancelButtonText: t('651')
  }).then(async () => {
    await editBatchThousand({
      agent_id:data.agent_id,
      ids:data.currency_ids,
      a_crypto_control:data.crypto_control,
    })
    ElMessage.success(t('907'))
    onHideDetails()
  }).catch(() => { })
}

const ruleFormRef = ref<FormInstance>()
const rules = reactive<FormRules<typeof data.currencyInfo>>({
  a_crypto_precision: [{ required: true, message: t('19')+t('899'), trigger: 'blur' }],
  a_crypto_min_user_position: [{ required: true, message: t('19')+t('901'), trigger: 'blur' }],
  a_crypto_max_user_position: [{ required: true, message: t('19')+t('903'), trigger: 'blur' }],
})
const gameSet = throttle(async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      await editThousand(data.currencyInfo);
      ElMessage.success(t('342'))
      emit('onHideDetails', true)
    }
  })
}, 3000)

// 重置
const emit = defineEmits(['onHideDetails'])
const onHideDetails = () => {
  if(data.batchShow){
    data.batchShow = false
    data.currency_ids = []
    data.crypto_control = 0
  }else{
    emit('onHideDetails', false)
  }
}
</script>

<style scoped lang="scss"></style>
